<template>
  <div ref="ganttChart"></div>
</template>

<script>
import Gantt from 'frappe-gantt';

export default {
  name: 'GanttChart',
  props: {
    tasks: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.renderGanttChart();
  },
  methods: {
    renderGanttChart() {
      const tasks = this.tasks.map(task => ({
        start: task.start,
        end: task.end,
        name: task.label,
        id: task.id,
        progress: 100,
        dependencies: ''
      }));

      new Gantt(this.$refs.ganttChart, tasks, {
        view_modes: ['Day', 'Week', 'Month'],
        bar_height: 20,
        padding: 18,
        date_format: 'YYYY-MM-DD'
      });
    }
  },
  watch: {
    tasks: 'renderGanttChart'
  }
};
</script>

<style scoped>
.gantt-chart-container {
  width: 100%;
  height: 300px;
}
</style>
